import Taro, { useDidShow } from "@tarojs/taro";
import { memo, useEffect, useState } from "react";
import { ScrollView, Text, View, Image, Input, Textarea, Canvas } from "@tarojs/components";
import { Popup, Button, Overlay, Picker } from "@nutui/nutui-react-taro";
import { navigateTo, secondsToMinutes } from "../../../../common/_";
import useNavInfo from "../../../../hooks/useNavInfo";
import dayjs from "dayjs";
import { iconClockBlack, iconCloseWhite, shareBg, wxCode } from "../../../../assets/files";
import { fail } from "assert";
import { selectUserInfo } from "../../../../api/user.js";
import "./index.scss";

const ShareModal = (props) => {
  const { visible, info, closeFn } = props

  const { screenHeight, screenWidth } = useNavInfo();
  const [typeList, setTypeList] = useState([])

  useEffect(() => {
    if (info?.list?.length > 3) {
      console.log(info.list);
      setTypeList(info?.list.slice(0, 3))
    } else {
      setTypeList(info?.list)
    }
  }, [info])


  const createScreenshot = (e) => {
    e.stopPropagation()
    navigateTo("/packageB/pages/study-total-share/index",info)
  }

  const { statusBarHeight } = useNavInfo()

  useDidShow(()=>{
    getUserInfo()
  })
  
  const [userData, setUserData] = useState({})
  async function getUserInfo() {
    const { data } = await selectUserInfo({})
    setUserData(data)
  }



  return (
    <View>
      {
        visible &&

        <View className="modalWrap" onClick={closeFn} style={{ width: screenWidth, height: screenHeight }}>

          <View className="contentWrap" style={{ marginTop: statusBarHeight + 80, }}>

              <View className="snapshotWrap">
                <View className="infoWrap">
                  {/* <Image src={shareBg} className="shareBg" /> */}
                  <View className="shareBg"></View>

                  <View className="topTit">
                    <Text className="shareTit">{dayjs().format("YYYY")}学习成就</Text>
                    <Text className="titDes">这是我们在一起的
                      <Text className="days"> {info?.days} </Text>
                      天，感谢你的一路陪伴</Text>
                  </View>

                  <View className="shareContentWrap">
                    <Text className="contentText">这一年里，
                      <Text className="xutType">{userData?.userName}</Text>
                      学习了
                      <Text className="xutType">
                        {info?.videoWatchTotal}
                      </Text>
                      个视频，学习总时长
                      <Text className="xutType">
                        {secondsToMinutes(info?.videoWatchDuration)}
                      </Text>
                      ，参加了
                      <Text className="xutType">
                        {
                          typeList?.map((v, i) => {
                            return i === typeList.length - 1 ? v : v + '、'
                          })
                        }
                      </Text>
                      {typeList && '等类型的共'}
                      <Text className="xutType">
                        {info?.examTotal}
                      </Text>
                      次测试{typeList ? '，取得了优异的测试成绩。':'。'}</Text>
                    <View className="cbot">
                      <Text className="contentText"><br />
                      我们共同见证了知识的力量在日常播种安全的种子，每一刻的学习都是对生命的尊重与守护，安全相伴，未来可期。
                      </Text>
                    </View>

                  </View>

                </View>
                <View className="codeWrap">
                  <Image className="wxCode" src={wxCode} />
                  <Text className="xuexi">长按识别小程序码来一起学习吧</Text>
                </View>
              </View>

          </View>

          <View className="shareBtnWrap">
          <View className="shareBtn" onClick={(e) => createScreenshot(e)}>
            <Text className="shareBtnText">分享成就</Text>
          </View>
          </View>
          <View className="coseWrap">
            <Image className="close" src={iconCloseWhite} />
          </View>
        </View>

      }


    </View>

  );
}

export default ShareModal;
